import Taro, {Component} from "@tarojs/taro";
import {View, Image, Text, ScrollView, Swiper, SwiperItem} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime,pageSize} from '../../utils/common'

import './mall.less'

// 商城-首页
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Personnel extends Component<IHomeProps> {
  constructor(porps) {
    super(porps)
  }

  state = {
    banner: [],
    recommendCategories:[],
    items:[],
    totalCount:0,
    pageIndex:1,
    pageSize,
    currentNavId:1,
    navActive: false, //
  }

  componentDidShow(): void {
    Taro.setNavigationBarTitle({ title:'积分商城' })
    this.getHomeInfo()
    this.getAllItemsInfo()
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  getHomeInfo() {
    let { PointMallStore } = this.props.stores
    PointMallStore.getHomeInfo({
      callback: home => {
        let homeArr = toJS(home)
       this.setState({
         banner: homeArr.upBanners,
         recommendCategories: homeArr.recommendCategories,
       })
      }
    })
  }

  getAllItemsInfo() {
    let { currentNavId,pageIndex,pageSize } = this.state
    let { PointMallStore } = this.props.stores
    PointMallStore.getAllItemsInfo({
      formRecommendCategoryId: currentNavId,
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({totalCount: toJS(res.totalCount), items: toJS(res.items)})
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }

  changeNavId(currentNavId) {
    this.setState({
      currentNavId,
      items: [],
      pageIndex: 1,
    }, () => {
      this.getAllItemsInfo()
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getAllItemsInfo()
      })
    }
  }

  onScroll(e){
    let top = e.detail.scrollTop
    if(top >= 165) {
      this.setState({
        navActive: true
      })
    }else {
      this.setState({
        navActive: false
      })
    }
  }

  render() {
    let { banner,recommendCategories,items,currentNavId,navActive } = this.state
    return (
      <ScrollView className='mall-index'
                  scrollY={true}
                  scrollWithAnimation={true}
                  onScroll={this.onScroll.bind(this)}
      >
        <View className='swiper-wrap'>
          <Swiper className='swiper' indicatorColor='#fff' indicatorActiveColor='#00a0e9'
                  circular
                  indicatorDots
          >
            {
              banner.map(item =>{
                return(
                  <SwiperItem className='swiper-item' key={item.id}>
                    <Image className='swiper-img' src={item.picture} />
                  </SwiperItem>
                )
              })
            }
          </Swiper>
        </View>

        <ScrollView className={navActive?'scroll-view-nav nav-active':'scroll-view-nav'} scrollX={true}>
          {recommendCategories.length>0&&
            recommendCategories.map(item => {
              return(
                <View className={currentNavId === item.id ? 'scroll-item scroll-item-on' : 'scroll-item'} key={item.id}
                  onClick={this.changeNavId.bind(this,item.id)}
                >
                  {item.title}<Text className='line'/></View>
              )
            })
          }
        </ScrollView>
        {navActive&& <View className='block' />}

        <View className='list-14' >
          {items&&
              items.map(item => {
               return(
                 <View className='list-14-item' key={item.id} onClick={this.handelRouter.bind(this, '/pages/mall/detail?id='+item.id)}>
                   <Image className='item-img' src={item.picture}/>
                   <View className='info'>
                     <View className='title list-title'>
                       {item.name}
                     </View>
                     <View className='price list-price'><Text className='small list-small'>￥</Text>{item.price}</View>
                   </View>
                 </View>
               )
              })
          }

          {items.length<=0&&<View className='page-none-info'>暂时没有该类商品哦~</View>}
        </View>

        <View className='footer-block' />
        <View className='page-submit' onClick={this.handelRouter.bind(this,'/pages/mall/custom')}>礼品定制中心＞ </View>
      </ScrollView>
    )
  }
}

export default Personnel
